<template>
  <div class="fade-in ng-scope">
    <div class="bg-light lter b-b wrapper-md ng-scope" id="table-page-title">
      <h1 class="m-n font-thin h3">基本信息</h1>
    </div>
    <div class="wrapper-md ng-scope form-horizontal">
      <div class="panel panel-default">
        <div class="panel-heading"><strong>您的基本信息</strong></div>
        <div class="panel-body">
          <el-form :model="user" :rules="rules" label-width="100px" ref="user">
            <div class="col-sm-5" id="data-user-photo" style="margin-top: 0px;">
              <el-form-item label="我的头像" prop="headImg">
                <img width="80px" height="80px"
                     :src="headImg" onerror="this.onerror=null;this.src='../../static/images/avatar.png'">
              </el-form-item>
            </div>
            <div class="line line-dashed line-xs pull-in"></div>
            <div class="col-sm-5">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="user.name"></el-input>
              </el-form-item>
            </div>
            <div class="col-sm-5">
              <el-form-item label="所属部门">
                {{user.department.name}}
              </el-form-item>
            </div>
            <div class="line line-dashed line-xs pull-in"></div>
            <div class="col-sm-5">
              <el-form-item label="昵称" prop="nickName">
                <el-input v-model="user.nickName"></el-input>
              </el-form-item>
            </div>
            <div style="clear: both"></div>
            <footer class="panel-footer text-right bg-light lter">
              <div style="float: left;">
                <span class="badge bg-danger text-base textTs"></span>
              </div>
              <el-button type="primary" :loading="ifSub" @click="submitForm()">提交修改</el-button>
            </footer>
            <div style="display: none">
              {{currentUser.name}}
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  import Vue from 'vue'
  import {SERVICE_URLS} from '../../../../config/service.url'

  export default{
    data: function () {
      return {
        user: {
          id: "",
          name: "",
          nickName: "",
          department: {
            name: ""
          },
          headImg: ""
        },
        ifSub: false,
        rules: {
          name: [
            {required: true, message: '请输入姓名', triggers: ['blur', 'change']},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', triggers: ['blur', 'change']}
          ],
          headImg: [
            {required: true, message: '请输入选择头像', triggers: ['change']}
          ]
        }
      }
    },
    computed: {
      currentUser(){
        const user = this.$store.state.currentUser;
        if (user != null) {
          this.user.name = user.name;
          this.user.nickName = user.nickName;
          this.user.department.name = user.department.fullName;
          this.user.headImg = user.headImg;
          this.user.id = user.id;
          return user;
        } else {
          return this.user
        }
      },
      headImg(){
        const user = this.$store.state.currentUser;
        if (user != null) {
          const headImg_ = user.headImg;
          if (headImg_ != null && headImg_ != "") {
            return headImg_ + (headImg_.indexOf("?") == -1 ? "?" : "|") + "imageView2/1/w/100/h/100";
          }
          return "";
        } else {
          return "";
        }
      }
    },
    methods: {
      submitForm() {
        var self = this;
        Vue.submit(self, {
          formName: 'user',
          url: SERVICE_URLS.user.userInfo,
          data: this.user,
          callback: function (data) {
            var user = self.$store.state.currentUser;
            user.nickName = data.body.nickName;
            user.name = data.body.name;
            user.headImg = data.body.headImg;
            self.$store.commit('currentUserUpdate', user);
          }
        }, Vue);
      }
    }
  }
</script>
<style>
  #data-user-photo .el-form-item__label {
    line-height: 58px;
  }
</style>
